import React, {Component} from 'react';
import {
    Icon,
    Button,
} from 'antd-mobile';

class PaySuccess extends Component {
    componentWillUnmount() {
        WeixinJSBridge.call('closeWindow');
    }
    render() {
        const orderInfo = this.props.location.orderInfo;
        return (<div style={{
                MozUserSelect: 'none',
                OUserSelect: 'none',
                KhtmlUserSelect: 'none',
                WebkitUserSelect: 'none',
                msUserSelect: 'none',
                userSelect: 'none'
            }}>


                <div style={{
                    backgroundColor: '#fff',
                    color: '#2DCB70',
                    height: '50px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                >
                    <Icon size="xs" type="check-circle" color="#2DCB70"/><b style={{marginLeft: 10}}>支付成功</b>
                </div>


                <div style={{
                    backgroundColor: '#fff',
                    marginTop: '20px',
                    padding: '10px 30px 10px 30px'
                }}
                >
                    <div style={{color: '#355A8C'}}>车牌号码：<b>{orderInfo.plateNumber}</b></div>
                    <div style={{color: '#355A8C', marginTop: '20px'}}>支付金额：<b
                        style={{color: '#FF355D'}}>{orderInfo.payments}</b> 元
                    </div>
                    <div style={{color: '#355A8C', marginTop: '20px'}}>下单时间：{orderInfo.creationTime}</div>
                </div>

                <div ref="footer" style={{
                    width: '100%',
                    position: 'fixed',
                    bottom: 0
                }}>
                    <Button className="am-button-submit" onClick={() => WeixinJSBridge.call('closeWindow')}>关闭</Button>
                </div>

                <style>
                    {
                        `
                         .am-button-submit {
                            border-radius: 0px;
                        }
                        html:not([data-scale]) .am-button::before{
                            border: 0;
                        }
                        `
                    }
                </style>
            </div>
        );
    }
}

export default PaySuccess;